<template>
    <view class="content">
        <view class="item" v-for="(item, index) in list" :key="index">
            <view class="i-top">
                <image :src="item.image_uri" mode="aspectFit" class="img"></image>
                <view class="item-r">
                    <view class="goods-name">{{item.goods_name}}</view>
                    <!-- <view class="spec">12公斤大容量12公斤大容量12公斤大容量12公斤大容量</view> -->
                    <view class="item-d">
                        <view class="price">￥<text class="price-num">{{item.sale_price}}</text></view>
                        <!-- <view class="deposit">订金￥26.00</view> -->
                        <view class="num">x{{item.goods_nums}}</view>
                    </view>
                </view>
            </view>
            <view class="rate">
                <view>为购买的商品打分</view>
                <u-rate :count="count" v-model="item.level" min-count="1" active-color="#fba503" inactive-color="#eee"></u-rate>
            </view>
            <view class="u-p-t-20 u-p-b-20">
                <view class="u-flex u-col-top">
                    <image src="../../static/icon/g_write2.png" class="write2"></image>
                    <textarea v-model="item.content" placeholder="商品如何，欢迎您的评价与反馈~" maxlength="200" class="t-inp"></textarea>
                </view>
                <view class="img-box">
                    <template v-if="item.pics_url && item.pics_url.length > 0">
                        <view class="u-rela" v-for="(el, ind) in item.pics_url" :key="ind">
                            <image :src="el.attach_uri" class="up" @click.stop="$previewImage(item.pics_url, ind)"></image>
                            <view class="del" @click.stop="$delImage(item.pics_url, item.pics, ind)">删除</view>
                        </view>
                    </template>
                    <image src="../../static/image/g_up.png" class="up" v-if="item.pics_url.length < 10" @click="chooseImage(item)"></image>
                </view>
                <view class="tip">{{ item.content.length }}/200字</view>
            </view>
        </view>
        
        <view class="btn" @click="doSubmit">确认</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                count: 5,
                id: '',
                list: [],
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getData()
        },
        methods: {
            doSubmit() {
                let evaluate = [], isNull = false
                this.list.forEach(cur => {
                    if (!cur.content) {
                        isNull = true
                    }
                })
                if (isNull) {
                    this.$toast('有未填写评价内容的商品，请填写完整！')
                    return
                }
                this.list.forEach(cur => {
                    evaluate.push({
                        goods_id: cur.goods_id,
                        order_goods_id: cur.order_goods_id,
                        level: cur.level,
                        pics: cur.pics.join(',') || '',
                        content: cur.content,
                    })
                })
                
                this.$ajax('evaluates', {
                	userToken: this.$getSync('userToken'),
                	order_id: this.id,
                    is_anonymity: 0,
                    evaluate: evaluate,
                }).then(ret => {
                	if (ret.status == 0) {
                		this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            chooseImage(item) {
                uni.chooseImage({
                    count: 9, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        for (let i = 0; i < tempFilePaths.length; i++) {
                            this.$upLoadPic(res.tempFilePaths[i]).then(ret => {
                                console.log(ret)
                                item.pics.push(ret.data.id)
                                item.pics_url.push({attach_uri: ret.data.attach_uri})
                            });
                        }
                    }
                });
            },
            
            getData() {
            	this.$ajax('evaluatesInfo', {
            		userToken: this.$getSync('userToken'),
            		order_id: this.id,
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.list = ret.data
                        this.list.forEach(cur => {
                            this.$set(cur, 'level', 5)
                            this.$set(cur, 'content', '')
                            this.$set(cur, 'pics_url', [])
                            this.$set(cur, 'pics', [])
                        })
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    
    
    
    page{
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    
    .item{
        padding: 0 20rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
    }
    .i-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
    }
    .img{
        width: 160rpx;
        height: 160rpx;
        border: 2rpx solid #e3e3e3;
        border-radius: 15rpx;
        overflow: hidden;
        margin-right: 25rpx;
    }
    .item-r{
        flex: 1;
    }
    .goods-name{
        width: 520rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 28rpx;
        font-weight: bold;
    }
    .spec{
        width: 520rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 24rpx;
        color: #6d6d6d;
        padding-top: 5rpx;
    }
    .item-d{
        padding-top: 45rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price{
        font-size: 26rpx;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
        padding-right: 30rpx;
    }
    .deposit{
        font-size: 24rpx;
        color: #ff5f2b;
        padding: 4rpx 12rpx;
        background-color: #fff1ec;
        border-radius: 5rpx;
    }
    .num{
        flex: 1;
        font-size: 26rpx;
        color: #929292;
        text-align: right;
    }
    
    .rate{
        font-size: 30rpx;
        font-weight: bold;
        padding: 10rpx 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border-bottom: 2rpx solid #a7a7a7;
    }
    .write2{
        width: 34rpx;
        height: 34rpx;
        margin-right: 15rpx;
    }
    .t-inp{
        width: 100%;
        height: 300rpx;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding: 10rpx 0 20rpx;
    }
    .up{
        width: 150rpx;
        height: 150rpx;
        margin-right: 10rpx;
        margin-top: 10rpx;
    }
    .del{
        position: absolute;
        right: 10rpx;
        bottom: 0;
        font-size: 22rpx;
        color: #fff;
        padding: 4rpx 10rpx;
        background: rgba(0, 0, 0, .5);
    }
    .tip{
        font-size: 24rpx;
        color: #959595;
        text-align: right;
    }
    .btn{
        background-color: #00734c;
        padding: 25rpx;
        border-radius: 50rpx;
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        margin: 40rpx 20rpx;
    }

</style>
